<script setup>
import buttonVue from '../button/button.vue';
import { RouterLink } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qs from 'qs'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import jwt_decode from "jwt-decode";


let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
  token = jwt_decode(localStorage.getItem("longToken"))
}

const router = useRouter();

const recharge = ref('支付')
const payPassword1 = ref('')
const payPassword2 = ref('')
function toThrid(tit) {
    sessionStorage.setItem("goto", tit)
    axios.post("http://192.168.110.221:8080/user/updatePayPasswordController",
        qs.stringify({
            token:localStorage.getItem("token"),
            longToken:localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber:token.userNumber,
            newPayPassword: payPassword1.value,
            confirmPayPassword: payPassword2.value,
        })).then((resp) => {
            console.log(resp);
            if (resp.data.code == 200) {
                console.log(resp.data.msg);
                open("修改成功")
                router.push('/')
            } else {
                open(resp.data.msg)
                router.push("/login")
            }
        }).catch((e) => {
            //跳转到404错误页面
            router.push('/login')
        })
}

function open(errormsg) {
    ElMessageBox.alert(errormsg, '消息', {
        confirmButtonText: '确认',
    })
}
</script>

<template>
    <div class="container">
        <div class="box">
            <h1 class="title">设置支付密码</h1>
            <input type="password" placeholder="设置支付密码" v-model=payPassword1 maxlength="6">
            <input type="password" placeholder="再次输入支付密码" v-model=payPassword2 maxlength="6">
            <button-vue btn-color="#1058f3" btn-name="立即修改支付密码" @click="toThrid(recharge)"></button-vue>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.box {
    margin: 0px auto 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
}

.title {
    font-size: 16px;
    margin: 10px 0;
}

input {
    width: 80%;
    font-size: 18px;
    outline: none;
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
    margin: 20px 0;
}</style>